/**
* @description: 步骤条-作业详情
* @author: zhaohui
* @data:2023年6月10日
* @remark:
**/
<template>
	<view>
		<van-steps class="steps" direction="vertical" :active="active" active-color="#417ADC" inactive-color="#666666">
			<van-step v-for="(item,index) in setpList" :key="index">
				<template v-slot:inactive-icon>
					<img src="../../../static/standardizedOperationImg/steps-icon.png"></img>
				</template>
				<template v-slot:active-icon>
					<img src="../../../static/standardizedOperationImg/steps-icon.png"></img>
				</template>
				<view class="steps-title">
					<text
						:class="item.flowState !== '1' ? 'step-title-name':'step-title-name-false'">{{item.flowName}}</text>
					<text v-if="item.mainFinshTime"
						:class="item.flowState === '2' ?'step-title-color' :'step-title-color-false'">{{item.mainFinshTime ? item.mainFinshTime : ""}}</text>
				</view>
				<view class="step-item" v-if="item.flowSubLogVos" v-for="(childItem,childIndex) in item.flowSubLogVos"
					:key="childIndex">
					<view class="step-item-child">
						<text class="step-item-child-name">{{childItem.flowName}}</text>
						<text @click="operate(childItem)"
							:class="flowStateNameClass(childItem.flowState)">{{childItem.flowStateName ? childItem.flowStateName : "--"}}</text>
					</view>
					<view class="step-item-child-time" v-if="childItem.alias === '签到' && childItem.finshTime">
						签到时间：{{childItem.finshTime ? childItem.finshTime : ""}}</view>

					<view style="color:#417ADC;font-weight: 700;" class="step-item-child-time"
						v-if="childItem.alias === '勘察' && childItem.surveyLevel">
						预控等级：{{childItem.surveyLevel ? childItem.surveyLevel :""}}
					</view>
					<view class="step-item-child-time" v-if="childItem.finshTime && (childItem.alias !== '会商分配'
					 && childItem.alias !== '推演分配' && childItem.alias !== '检修准备' && childItem.alias !== '签到')">
						完成时间：{{childItem.finshTime ? childItem.finshTime :""}}
					</view>
					<view class="step-item-child-time" v-if="childItem.alias === '会商分配' && childItem.consultatioTime">
						会商时间：{{childItem.consultatioTime ?childItem.consultatioTime:""}}</view>

					<view class="step-item-child-time" v-if="childItem.alias === '会商分配' && childItem.operatorName">
						会商人员：{{childItem.operatorName ? childItem.operatorName:""}}</view>
					<view class="step-item-child-time" v-if=" childItem.alias === '推演分配' && childItem.deductionTime">
						推演时间：{{childItem.deductionTime ? childItem.deductionTime:""}}</view>

					<view class="step-item-child-time" v-if="childItem.alias === '推演分配' && childItem.operatorName">
						推演人员：{{childItem.operatorName ? childItem.operatorName:""}}</view>
					<view class="step-item-child-overhaul" v-if="childItem.alias === '检修准备'">
						<view class="step-item-child-time overhaul" v-if="childItem.overhaulConfirmResult">
							<span>已确认时间：{{childItem.finshTime}}</span>
							<span>{{childItem.overhaulConfirmResult ? childItem.overhaulConfirmResult ==1 ? "具备实施条件" : "不具备实施条件" :"" }}</span>
						</view>

						<view class="step-item-child-time" v-if="childItem.overhaulConfirmTime">
							计划作业时间：{{childItem.overhaulConfirmTime ? childItem.overhaulConfirmTime :""}}</view>
					</view>
				</view>
			</van-step>
		</van-steps>
	</view>

</template>

<script>
	import {
		Toast,
	} from 'vant';
	export default {
		props: ["setpList", "active", "isMyInitiate"],
		data() {
			return {}
		},
		methods: {
			/**
			 * @param {Object} data
			 * buttonPower 0：按钮可点击，1：按钮不可点击
			 */
			operate(data) {
				if (data.flowState === "0") {
					Toast('当前节点未开始')
					return
				}
				this.$emit("operate", data)
			},
			flowStateNameClass(flowState) {
				if (flowState === "1" && this.isMyInitiate === "-1") {
					return "step-item-child-color-yes"
				} else if (flowState === "2") {
					return "step-item-child-color"
				} else {
					return "step-item-child-color-false"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps {
		margin-bottom: px2vw(163+30);

		// ::v-deep .van-step__line {
		// 	top: px2vw(36+18);//36图片宽度 18一半图片
		// 	left: px2vw(-56);
		// 	width: px2vw(36);
		// 	height: 100%;
		// 	background-color: #417ADC;
		// }

		img {
			width: px2vw(36);
			height: px2vw(36);
			object-fit: contain;
		}

		.steps-title {
			display: flex;
			justify-content: space-between;

			.step-title-name,
			.step-title-name-false {
				font-size: px2vw(42);
				line-height: px2vw(62);
			}

			.step-title-name {
				color: #666666;
			}

			.step-title-name-false {
				color: #417ADC;
			}

			.step-title-color,
			.step-title-color-false {
				height: px2vw(54);
				font-size: px2vw(36);
				line-height: px2vw(62);
				border-radius: px2vw(10);
				text-align: center;
				font-weight: 550;
				padding: px2vw(10) px2vw(15);
			}

			.step-title-color {
				color: #3CDA68;
				background-color: #EBFBF0;
			}

			.step-title-color-false {
				color: #417ADC;
				background-color: #ECF1FB;
			}
		}

		.step-item-child {
			display: flex;
			justify-content: space-between;
			background-color: #F7F7F7;
			align-items: center;
			border-radius: px2vw(10);
			width: 100%;
			height: px2vw(120);
			padding: 0 px2vw(24) 0 px2vw(40);
			margin-top: px2vw(50);
			box-sizing: border-box;

			.step-item-child-name {
				font-size: px2vw(40);
				line-height: px2vw(62);
				color: #666666;
			}

			// .step-title-color,
			// .step-title-color-false {
			// 	width: px2vw(140);
			// 	height: px2vw(54);
			// 	font-size: px2vw(36);
			// 	line-height: px2vw(62);
			// 	border-radius: px2vw(10);
			// 	text-align: center;
			// }

			// .step-title-color {
			// 	color: #3CDA68;
			// 	background-color: #EBFBF0;
			// }

			// .step-title-color-false {
			// 	color: #417ADC;
			// 	background-color: #EBFBF0;
			// }

			.step-item-child-color,
			.step-item-child-color-false,
			.step-item-child-color-yes {
				width: px2vw(170);
				height: px2vw(80);
				font-size: px2vw(36);
				line-height: px2vw(80);
				border-radius: px2vw(10);
				text-align: center;
			}

			.step-item-child-color {
				color: #FFFFFF;
				background-color: #3CDA68;
			}

			.step-item-child-color-yes {
				color: #FFFFFF;
				background-color: #417ADC;
			}

			.step-item-child-color-false {
				color: #FFFFFF;
				background-color: #C9C9C9;
			}
		}

		.step-item-child-time {
			font-size: px2vw(30);
			line-height: px2vw(62);
			color: #666666;
			opacity: 0.6;
			margin-top: px2vw(30);
		}

		.step-item-child-overhaul {
			width: 100%;

			.overhaul {
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
